import React,{useState,useEffect} from 'react'
import { NavBar, WhiteSpace, SearchBar } from "antd-mobile";
import "./components/css/home.less"
import { Getgroupon, Getnew, Getseckill,Getindexgoods } from '../../http/api';
import GETnew from './components/getnew/getnew';
import Wanren from "./components/groupon/groupon"
import Seckill from './components/seckill/seckill';
import Goodslist from "./components/List/List"
import yhq from "../../assets/img/yhq.png"
import yhqlq from "../../assets/img/yhqlq.png"
import home_menu from "../../assets/img/home_menu.png"

export default function Home() {
    //初始化getnew
    const [getnewlist,setnew] = useState([])
    const [wanrenlist,setwanren] = useState([])
    const [seckilllist,setseckill] = useState([])
    const [goodslist,setgoods] = useState([])
    const [n, setN] = useState(0);
    //生命周期
    useEffect(() => {
        Getnew().then(res=>{
            if(res.data.code===200){
                setnew(res.data.list)
            }
        });

        Getgroupon().then(res=>{
            if(res.data.code===200){
                setwanren(res.data.list)
            }
        });

        Getseckill().then(res=>{
            if(res.data.code===200){
                setseckill(res.data.list)
            }
        });

        Getindexgoods().then(res=>{
            if(res.data.code ===200){
                setgoods(res.data.list)
            }
        })
    }, []);

    return (
        <div>
            <NavBar>首页</NavBar>

            <SearchBar placeholder="搜索" maxLength={8} />
            <WhiteSpace />

            {getnewlist.length > 0 ? <GETnew getnewlist={getnewlist}></GETnew> : null}

            <div className="yhq">
                <h3>二重礼</h3>
                <img className="left" src={yhq} alt="" />
                <img className="right" src={yhqlq} alt="" />
            </div>
            <div className="home_menu">
                <img src={home_menu} alt="" />
            </div>

            {wanrenlist.length > 0 ? <Wanren wanrenlist={wanrenlist}></Wanren> : null}

            {seckilllist.length > 0 ? <Seckill seckilllist={seckilllist}></Seckill> : null}
            
            {goodslist.length>0?(<Goodslist goodslist={goodslist[n].content} n={n} setN={(e)=>setN(e)}></Goodslist>):null}
        </div>
    )
}